<!DOCTYPE html>
<html lang="en" data-theme=""><head>
    <title> Jane Doe | Math Typesetting </title>

    
    <meta charset="utf-8"><meta name="generator" content="Hugo 0.79.0" /><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
    <meta name="description" content="Call me Jane">
    
    <link rel="stylesheet"
          href="https://deskbook.gitee.io/css/style.min.ae4af30f6a89627b05def70e914c14cbb53a71d28a88ec8d87a40ecc7c2778e2.css"
          integrity="sha256-rkrzD2qJYnsF3vcOkUwUy7U6cdKKiOyNh6QOzHwneOI="
          crossorigin="anonymous"
          type="text/css"><link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" 
    integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" 
    crossorigin="anonymous" />

    
    <link rel="shortcut icon" href="https://deskbook.gitee.io/favicons/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="https://deskbook.gitee.io/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://deskbook.gitee.io/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://deskbook.gitee.io/favicons/favicon-16x16.png">

    <link rel="canonical" href="https://deskbook.gitee.io/post/math-typesetting/">

    
    
    
    
    <script type="text/javascript"
            src="https://deskbook.gitee.io/js/anatole-header.min.e782db136ec18d105a4552702eac49f4620d6867da3fbf808bd53e806c96be6e.js"
            integrity="sha256-54LbE27BjRBaRVJwLqxJ9GINaGfaP7&#43;Ai9U&#43;gGyWvm4="
            crossorigin="anonymous"></script>
    <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://deskbook.gitee.io/images/site-feature-image.png"/>

<meta name="twitter:title" content="Math Typesetting"/>
<meta name="twitter:description" content="A brief guide to setup KaTeX"/>

</head>
<body><div class="sidebar animated fadeInDown">
    <div class="logo-title">
        <div class="title">
            <img src="https://deskbook.gitee.io/images/profile.jpg" alt="profile picture">
            <h3 title=""><a href="/">I&#39;m Jane Doe</a></h3>
            <div class="description">
                <p>Call me Jane</p>
            </div>
        </div>
    </div>
    <ul class="social-links">
        
            <li>
                <a href="https://de.linkedin.com/" rel="me" aria-label="Linkedin">
                    <i class="fab fa-linkedin fa-2x" aria-hidden="true"></i>
                </a>
            </li>
        
            <li>
                <a href="https://github.com/lxndrblz/anatole/" rel="me" aria-label="GitHub">
                    <i class="fab fa-github fa-2x" aria-hidden="true"></i>
                </a>
            </li>
        
            <li>
                <a href="https://www.instagram.com/" rel="me" aria-label="instagram">
                    <i class="fab fa-instagram fa-2x" aria-hidden="true"></i>
                </a>
            </li>
        
            <li>
                <a href="mailto:mail@alexbilz.com" rel="me" aria-label="e-mail">
                    <i class="fas fa-envelope fa-2x" aria-hidden="true"></i>
                </a>
            </li>
        
    </ul>
    <div class="footer">
        <div class="by_farbox">&copy; Jane Doe 2020 </div>
    </div>
</div>
<div class="main">
    <div class="page-top animated fadeInDown">
    <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
    </a>
    <ul class="nav" id="navMenu">
        
        
            
            <li><a 
                   href="/"
                        
                   title="">Home</a></li>
        
            
            <li><a 
                   href="/post/"
                        
                   title="">Posts</a></li>
        
            
            <li><a 
                   href="/about/"
                        
                   title="">About</a></li>
        
        
        <li class="theme-switch-item">
            <a class="theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a>
        </li>
    </ul>
</div>

    <div class="autopagerize_page_element">
        <div class="content">
    <div class="post animated fadeInDown">
        <div class="post-content">

            <div class="post-title">
                <h3>Math Typesetting</h3>
                
                    <div class="info">
                        <em class="fas fa-calendar-day"></em>
                        <span class="date">Fri, Mar 8, 2019</span>
                        <em class="fas fa-stopwatch"></em>
                        <span class="reading-time">One-minute read</span>
                    </div>
                
            </div>

            <p>Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.</p>
<p>In this example we will be using <a href="https://katex.org/">KaTeX</a></p>
<ul>
<li>Create a partial under <code>/layouts/partials/math.html</code></li>
<li>Within this partial reference the <a href="https://katex.org/docs/autorender.html">Auto-render Extension</a> or host these scripts locally.</li>
<li>Include the partial in your templates like so:</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash"><span style="color:#f92672">{{</span> <span style="color:#66d9ef">if</span> or .Params.math .Site.Params.math <span style="color:#f92672">}}</span>
<span style="color:#f92672">{{</span> partial <span style="color:#e6db74">&#34;math.html&#34;</span> . <span style="color:#f92672">}}</span>
<span style="color:#f92672">{{</span> end <span style="color:#f92672">}}</span>
</code></pre></div><ul>
<li>To enable KaTex globally set the parameter <code>math</code> to <code>true</code> in a project&rsquo;s configuration</li>
<li>To enable KaTex on a per page basis include the parameter <code>math: true</code> in content files</li>
</ul>
<p><strong>Note:</strong> Use the online reference of <a href="https://katex.org/docs/supported.html">Supported TeX Functions</a></p>

<h3 id="examples">Examples</h3>
<p>Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)</p>
<p>Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$</p>
        </div>
        <div class="post-footer">
            <div class="info">
                
                
            </div>
        </div>

        
            
        
    </div>


        </div>
    </div>
</div>

<script type="text/javascript"
        src="https://deskbook.gitee.io/js/jquery.min.86b1e8f819ee2d9099a783e50b49dff24282545fc40773861f9126b921532e4c.js"
        integrity="sha256-hrHo&#43;BnuLZCZp4PlC0nf8kKCVF/EB3OGH5EmuSFTLkw="
        crossorigin="anonymous"></script>




<script type="text/javascript"
        src="https://deskbook.gitee.io/js/bundle.min.0f9c74cb78f13d1f15f33daff4037c70354f98acfbb97a6f61708966675c3cae.js"
        integrity="sha256-D5x0y3jxPR8V8z2v9AN8cDVPmKz7uXpvYXCJZmdcPK4="
        crossorigin="anonymous"></script>

<script type="text/javascript"
        src="https://deskbook.gitee.io/js/medium-zoom.min.92f21c856129f84aeb719459b3e6ac621a3032fd7b180a18c04e1d12083f8aba.js"
        integrity="sha256-kvIchWEp&#43;ErrcZRZs&#43;asYhowMv17GAoYwE4dEgg/iro="
        crossorigin="anonymous"></script>
<link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
              integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/&#43;DiW/UqRcLbRjq"
              crossorigin="anonymous"><script defer
                src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
                integrity="sha384-y23I5Q6l&#43;B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd&#43;qj&#43;o24G5ZU2zJz"
                crossorigin="anonymous"></script><script defer
                src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"
                integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
                crossorigin="anonymous"
                onload="renderMathInElement(document.body);"></script></body>

</html>
